<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小米登陆界面</title>
    <link rel="stylesheet" href="css/index.css">
    <script src="lib/jquery-3.2.1.js"></script>
</head>
<body>
    <div class="header">
        <div class="header-picture"></div>
    </div>
    <div class="line">
        <span class="logo"></span>
        <span class="logo-word">
            <p class="logo-word1">小米商城</p>
            <P>让每个人都能享受科技的乐趣</P>
        </span>
        <span class="form">
            <form>
                <p class="one">
                    <span class="word-one">账号登陆</span>
                    <!-- <span class="word-two">|</span> -->
                    <span class="word-three">扫码登陆</span>
                </p>
                <p class="phone">
                    <input type="text" placeholder="&nbsp;&nbsp;&nbsp;邮箱/手机号码/小米账号">
                </p>
                <p class="password">
                    <input type="password" placeholder="&nbsp;&nbsp;&nbsp;密码">
                </p>
                <p class="submit">
                    <input type="submit" value="立即登录" class="input-1">
                </p>
                <p class="two">
                    <span class="word-1">注册小米账号&nbsp;&nbsp;</span>
                    <span class="word-2">|</span>
                    <span class="word-3">&nbsp;&nbsp;忘记密码?</span>
                </p>
                <div class="three"><hr></div>
                <span class="other">其他方式登录</span>
                <div class="buttom-nav">
                    <a href="#" class="wrap">
                        <span class="qq"></span>
                    </a>
                    <a href="#" class="wrap">
                        <span class="weibo"></span>
                    </a>
                    <a href="#" class="wrap">
                        <span class="pay"></span>
                    </a>
                    <a href="#" class="wrap">
                        <span class="wechat"></span>
                    </a>
                </div>
                <div class="small-line">|</div>
                <div class="niubi">
                    <div class="zhanghao">
                        <form>
                            <p class="xphone">
                                <input type="text"placeholder="&nbsp;&nbsp;&nbsp;邮箱/手机号码/小米账号">
                            </p>
                            <p class="xpassword">
                                <input type="password" placeholder="&nbsp;&nbsp;&nbsp;密码">
                            </p>
                            <p class="xsubmit">
                                <input type="submit" value="立即登录" class="input-1">
                            </p>
                            <div class="three"><hr></div>
                            <span class="other">其他方式登录</span>
                            <p class="xtwo">
                                <span class="word-1">注册小米账号&nbsp;&nbsp;</span>
                                <span class="word-2">|</span>
                                <span class="word-3">&nbsp;&nbsp;忘记密码?</span>
                            </p>
                            <div class="buttom-nav">
                                <a href="#" class="wrap">
                                    <span class="qq"></span>
                                </a>
                                <a href="#" class="wrap">
                                    <span class="weibo"></span>
                                </a>
                                <a href="#" class="wrap">
                                    <span class="pay"></span>
                                </a>
                                <a href="#" class="wrap">
                                    <span class="wechat"></span>
                                </a>
                            </div>
                        </form>
                    </div>
                    <div class="saoma">
                        <div class="code"></div>
                    </div>
                </div>
            </form>
        </span>
        <div class="footer">
            <p class="footer-word">简体&nbsp;&nbsp;|&nbsp;&nbsp;繁体&nbsp;&nbsp;|&nbsp;&nbsp;English&nbsp;&nbsp;|&nbsp;&nbsp;常见问题</p>
            <p class="footer-number">小米公司版权所有-京ICP备10046444-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp京公网安备11010802020134号-京ICP证110507号</p>
            <span class="ghs"></span>
        </div>
    </div>
    <script>
        $(".word-one,.word-three").click(function(){
            // $(this).addClass("word-one").siblings().removeClass("word-one")
            $(".niubi>div").eq($(this).index()).show().siblings().hide();
        })
    </script>
</body>
</html>